<template>
	<app-layout>
		<view v-if="!toSearch" style="z-index: 50">
			<!-- <view class='status' v-if="is_mall">
				<view class='status-list main-between'>
					<view @click='tab(1)' :class="[`${status==1?'active':''}`,`left-status`]">订单</view>
					<view @click='tab(2)' :class="[`${status==2?'active':''}`,`right-status`]">卡券</view>
				</view>
			</view> -->
			<view :class="[`search`, `${is_mall?'':'no-mall'}`]">
				<view @click='beSearch' class="main-center search-content cross-center">
					<image src="/static/image/icon/icon-search.png"></image>
					<text>搜索</text>
				</view>
			</view>
			<app-tab-nav :setTop="setTop" :placeHeight="placeHeight" setHeight="96" :tabList="tabList" padding="0"
				:activeItem="activeTab" @click="tabStatus"></app-tab-nav>
			<view v-if="_num == 2" @click="scan" class='scan'>
				<image src='./../image/scan.png'></image>
			</view>
		</view>
		<view v-if="toSearch" class="search-item main-between cross-center">
			<view class="search-input">
				<image src='/static/image/icon/icon-search.png'></image>
				<input v-if="status == 1 && toSearch" focus @confirm='search' confirm-type='search' v-model='keyword'
					placeholder-style='color:#999999;font-size:13px;' placeholder='输入订单号/商品名称/店铺名称搜索' />
				<input v-if="status == 2 && toSearch" focus @confirm='search' confirm-type='search' v-model='keyword'
					placeholder-style='color:#999999;font-size:13px;' placeholder='输入卡券名称/用户昵称搜索' />
			</view>
			<view @click="cancelSeacrch">取消</view>
		</view>
		<view v-if="!searchResult && toSearch" :class="[`search-history`,`${list.length == 0 ? '' : 'go-out'}`]">
			<view v-if="candidate.length != 0" class='main-between search-title'>
				<view>历史搜索</view>
				<view @click="clear">
					<image class="history-img" src="/static/image/icon/delete.png"></image>
				</view>
			</view>
			<view class='flex-wrap history-list'>
				<view @click="keywordSearch(item)" class="keyword-item box-grow-0" v-for="item in candidate"
					:key="item">
					<text class="t-omit">{{item}}</text>
				</view>
			</view>
		</view>
		<view v-if="toSearch" class="search-place"></view>

		<template v-if="status == 1">
			<view v-for="item in list" :key="item.id" class="item">
				<view class='main-between item-top'>
					<view class='shop t-omit'>
						<image src='./../image/shop.png'></image>
						<text>{{item.store.name}}</text>
					</view>
					<view class="item-status" v-if="item.clerk_id > 0">已核销</view>
					<view class="item-status" v-else-if="item.cancel_status == 1">已退款</view>
					<view class="item-status" v-else>未核销</view>
				</view>
				<view @click="toDetail(item.id)">
					<view class="goods" :style="{'margin-top':`${index == 0 ?'0':'12'}px`}" v-for="goods in item.detail"
						:key="goods.id">
						<image :src='goods.goods.goodsWarehouse.cover_pic'></image>
						<view class='goods-info'>
							<view class='goods-name t-omit-two'>{{goods.goods.goodsWarehouse.name}}</view>
							<view class="goods-attr">
								<text v-for="attr in goods.attr_list" :key="attr.id">
									{{attr.attr_group_name}}:{{attr.attr_name}}
								</text>
							</view>
							<view>x{{goods.num}}</view>
						</view>
						<view class='goods-price'>￥ {{goods.total_price}}</view>
					</view>
				</view>
				<view class='total'>合计
					<text>￥{{item.total_pay_price}}</text>
					(含运费￥{{item.express_price}})
				</view>
				<view class='dir-right-nowrap' v-if="item.clerk_id == 0 && item.cancel_status != 1">
					<view class="refund-text" v-if="item.refund">{{item.refund}}</view>
					<view v-else class="clerk-btn dir-right-nowrap" @click="toClerk(item.id)">
						<button>核销</button>
					</view>
				</view>
			</view>
		</template>

		<template v-if="status == 2">
			<view v-for="item in list" :key="item.id" class="item card-item">
				<image class='card-img' :src='item.pic_url'></image>
				<view @click="toCardDetail(item.id)">
					<view class='t-omit-two card-name'>{{item.name}}</view>
					<view class="surplus-number">剩余{{item.number - item.use_number}}次</view>
					<view class='dir-left-nowrap platform cross-center'>
						<image class='platform-img' v-if="item.platform == 'wxapp'" src='./../image/wx.png'></image>
						<image class='platform-img' v-if="item.platform == 'aliapp'" src='./../image/ali.png'></image>
						<view>{{item.nickname}}</view>
					</view>
				</view>
				<view class='cross-center card-clerk'>
					<view v-if="item.is_use == 0 && item.receive_id == 0" class="clerk-btn dir-right-nowrap"
						@click="toClerkCard(item.id)">
						<button>核销</button>
					</view>
					<view v-else-if="item.is_use == 0 && item.receive_id > 0" class="clerk-btn-1">
						已转赠
					</view>
					<image v-else class='clerked-img' src='./../image/clerked.png'></image>
				</view>
			</view>
		</template>

		<view class='no-tip' v-if="list.length == 0 && status == 1">
			<image :src='clerkImg.order'></image>
			<view>没有任何订单哦~</view>
		</view>
		<view class='no-tip' v-if="list.length == 0 && status == 2">
			<image :src='clerkImg.card'></image>
			<view>没有任何卡券哦~</view>
		</view>
	</app-layout>
</template>

<script>
	import appTabNav from "../../../../components/basic-component/app-tab-nav/app-tab-nav.vue";

	import {
		mapState
	} from "vuex";

	export default {
		name: "about",
		components: {
			"app-tab-nav": appTabNav,
		},
		data() {
			return {
				activeTab: 2,
				order_list: [{
						id: 2,
						name: '未核销'
					},
					{
						id: 1,
						name: '已核销'
					},
					{
						id: 5,
						name: '已退款'
					},
					{
						id: 3,
						name: '我的'
					},
				],
				card_list: [{
						id: 2,
						name: '未核销'
					},
					{
						id: 1,
						name: '已核销'
					},
					{
						id: 3,
						name: '我的'
					},
				],
				tabList: [],
				candidate: [],
				status: 1,
				placeHeight: 206,
				// placeHeight: 312,
				setTop: 86,
				// setTop: 190,
				more_list: false,
				is_mall: false,
				toSearch: false,
				searchResult: false,
				first: false,
				keyword: '',
				list: []
			};
		},
		computed: {
			...mapState({
				clerkImg: state => state.mallConfig.__wxapp_img.clerk,
				mall: state => state.mallConfig.mall
			}),
		},
		onLoad(options) {
			this.status = options.status
			if (options.type > 0) {
				this.activeTab = options.type
			}
			this.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			this.$request({
				url: this.$apiSol.clerk.info
			}).then(response => {
				if (response.code == 0) {
					this.is_mall = response.data.is_mall;
					if (!response.data.is_mall) {
						this.placeHeight = 210;
						this.setTop = 88;
					}
					this.list = [];
					if (this.status == 1) {
						this.tabList = this.order_list;
						this.getList();
						uni.setNavigationBarTitle({
							title: "订单",
						})
					} else if (this.status == 2) {
						this.tabList = this.card_list;
						this.getCard();
						uni.setNavigationBarTitle({
							title: "卡券",
						})
					}
				} else {
					uni.redirectTo({
						url: '/plugins/mch_solitaire/user-center/user-center'
					})
				}
			})
		},
		onReachBottom: function() {
			if (this.more_list) {
				this.getMore();
			}
		},
		onShow(options) {
			let that = this;
			if (that.first) {
				that.$request({
					url: that.$apiSol.clerk.info
				}).then(response => {
					if (response.code == 0) {
						that.is_mall = response.data.is_mall;
						if (!response.data.is_mall) {
							this.placeHeight = 112
						}
						if (that.status == 1) {
							that.getList();
							uni.setNavigationBarTitle({
								title: "订单",
							})
						} else if (that.status == 2) {
							that.getCard();
							uni.setNavigationBarTitle({
								title: "卡券",
							})
						}
					} else {
						uni.redirectTo({
							url: '/plugins/mch_solitaire/user-center/user-center'
						})
					}
				})
			}

			if (!that.first) {
				if (that.status == 1) {
					that.getList();
				} else if (that.status == 2) {
					that.getCard();
				}
			}
		},
		methods: {
			getMore() {
				let that = this;
				let url;
				let para;
				if (that.load) {
					return false
				}
				that.load = true;
				if (that.status == 1) {
					if (that.activeTab == 3) {
						url = that.$apiSol.clerk.my;
						para = {
							page: that.page,
						}
					} else if (that.activeTab == 5) {
						url = that.$apiSol.clerk.order;
						para = {
							status: that.activeTab,
							keyword_1: 8,
							keyword: that.keyword
						}
					} else {
						url = that.$apiSol.clerk.order;
						para = {
							page: that.page,
							is_clerk: that.activeTab,
						}
					}
				} else {
					if (that.activeTab == 3) {
						url = that.$apiSol.clerk.my_card;
						para = {
							page: that.page,
						}
					} else {
						url = that.$apiSol.clerk.card;
						para = {
							page: that.page,
							is_clerk: that.activeTab,
						}
					}
				}
				that.$request({
					url: url,
					data: para,
				}).then(response => {
					that.$hideLoading();
					that.load = false;
					if (response.code == 0) {
						that.list = that.list.concat(response.data.list);
						that.page++;
						that.more_list = false;
						if (response.data.list.length == response.data.pagination.pageSize) {
							that.more_list = true;
						}
						that.list.forEach(function(row) {
							row.refund = null;
							if (row.cancel_status == 2) {
								row.refund = '申请取消中'
							} else if (row.is_pay == 0) {
								row.refund = '订单未支付'
							}
						})
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.load = false;
					that.$hideLoading();
				});
			},

			toClerk(id) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/order/clerk/clerk?id=' + id
				});
			},
			toClerkCard(id) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/card/clerk/clerk?cardId=' + id
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/clerk/detail/detail?id=' + id
				});
			},
			toCardDetail(id) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/clerk/detail/detail?card_id=' + id
				});
			},
			keywordSearch(e) {
				this.keyword = e;
				this.searchResult = true;
				if (this.status == 1) {
					this.getList();
				} else {
					this.getCard();
				}
			},
			beSearch() {
				this.candidate = uni.getStorageSync('clerk_keyword');
				if (this.status == 2) {
					this.candidate = uni.getStorageSync('clerk_card_keyword');
				}
				this.toSearch = !this.toSearch;
				this.list = [];
				this.searchResult = false;
				uni.setNavigationBarTitle({
					title: "搜索",
				})
			},
			cancelSeacrch() {
				this.toSearch = !this.toSearch;
				this.keyword = '';
				if (this.status == 1) {
					this.getList();
					uni.setNavigationBarTitle({
						title: "订单",
					})
				} else {
					this.getCard();
					uni.setNavigationBarTitle({
						title: "卡券",
					})
				}
			},
			search() {
				var value = uni.getStorageSync('clerk_keyword');
				if (this.status == 2) {
					value = uni.getStorageSync('clerk_card_keyword');
				}
				if (this.keyword.length == 0 || this.keyword.trim().length == 0) {
					this.keyword = ''
					return
				} else if (value.length > 0) {
					value.unshift(this.keyword)
				} else {
					value = [this.keyword]
				}
				value.forEach(function(row, index) {
					if (value[0] == value[index] && index > 0) {
						value.splice(index, 1)
					}
				})
				if (this.status == 1) {
					uni.setStorage({
						key: "clerk_keyword",
						data: value
					})
					this.getList();
				} else {
					uni.setStorage({
						key: "clerk_card_keyword",
						data: value
					})
					this.getCard();
				}
			},
			// 清除搜索记录
			clear() {
				let that = this;
				uni.removeStorage({
					key: this.status == 2 ? 'clerk_card_keyword' : 'clerk_keyword',
					success(res) {
						that.candidate = [];
						uni.showToast({
							title: '清理成功',
							duration: 1000,
							type: 'success',
							mask: false
						});
					}
				});
			},
			tabStatus(e) {
				let that = this;
				if (that.load) {
					return false
				}
				uni.showLoading({
					title: '加载中...'
				});
				that.list = [];
				that.page = 2;
				that.activeTab = e.currentTarget.dataset.id;
				if (this.status == 1) {
					this.getList();
				} else {
					this.getCard();
				}
			},
			tab(e) {
				let that = this;
				if (that.load) {
					return false
				}
				uni.showLoading({
					title: '加载中...'
				});
				that.list = [];
				that.page = 2;
				that.activeTab = 2;
				that.status = e;
				if (e == 1) {
					this.tabList = this.order_list;
					this.getList();
				} else {
					this.tabList = this.card_list;
					this.getCard();
				}
			},
			getList() {
				let that = this;
				let url;
				let para;
				if (that.load) {
					return false
				}
				that.load = true;
				if (this.activeTab == 3) {
					url = that.$apiSol.clerk.my;
					para = {
						keyword_1: 8,
						keyword: this.keyword
					}
				} else if (this.activeTab == 5) {
					url = that.$apiSol.clerk.order;
					para = {
						status: this.activeTab,
						keyword_1: 8,
						keyword: this.keyword
					}
				} else {
					url = that.$apiSol.clerk.order;
					para = {
						is_clerk: this.activeTab,
						keyword_1: 8,
						keyword: this.keyword
					}
				}
				that.$request({
					url: url,
					data: para,
				}).then(response => {
					uni.hideLoading();
					that.$hideLoading();
					that.load = false;
					if (response.code == 0) {
						that.first = true;
						that.list = response.data.list;
						that.page = 2;
						that.searchResult = true;
						that.more_list = false;
						if (response.data.list.length == response.data.pagination.pageSize) {
							that.more_list = true;
						}
						that.list.forEach(function(row) {
							row.refund = null;
							if (row.cancel_status == 2) {
								row.refund = '申请退款中'
							} else if (row.is_pay == 0) {
								row.refund = '订单未支付'
							}
						})
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.load = false;
					uni.hideLoading();
					that.$hideLoading();
				});
			},
			getCard() {
				let that = this;
				let url;
				let para;
				if (that.load) {
					return false
				}
				that.load = true;
				if (this.activeTab == 3) {
					url = that.$apiSol.clerk.my_card;
					para = {
						keyword: this.keyword
					}
				} else {
					url = that.$apiSol.clerk.card;
					para = {
						is_clerk: this.activeTab,
						keyword: this.keyword
					}
				}
				that.$request({
					url: url,
					data: para,
				}).then(response => {
					that.load = false;
					uni.hideLoading();
					that.$hideLoading();
					if (response.code == 0) {
						that.list = response.data.list;
						that.page = 2;
						that.searchResult = true;
						that.more_list = false;
						if (response.data.list.length == response.data.pagination.pageSize) {
							that.more_list = true;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.load = false;
					uni.hideLoading();
					that.$hideLoading();
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.search {
		height: #{88rpx};
		padding: #{16rpx} #{26rpx};
		background-color: #efeff4;
		position: fixed;
		// top: #{104rpx};
		left: 0;
		right: 0;
		z-index: 10;
	}

	.search-place {
		height: #{120rpx};
		width: 100%;
	}

	.search.no-mall {
		top: 0;
	}

	.search-content {
		background-color: #fff;
		height: #{56rpx};
		border-radius: #{28rpx};
	}

	.search-content image {
		height: #{24rpx};
		width: #{24rpx};
	}

	.search-content text {
		color: #b2b2b2;
		font-size: #{24rpx};
		margin: 0 #{5rpx};
	}

	.tab-list {
		height: #{96rpx};
		position: fixed;
		top: #{192rpx};
		left: 0;
		right: 0;
		z-index: 10;
		width: 100%;
		background-color: #fff;
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.tab-list.no-mall {
		top: #{88rpx};
	}

	.tab-item {
		text-align: center;
		font-size: #{28rpx};
		color: #666;
	}

	.tab-item text {
		height: #{92rpx};
		line-height: #{92rpx};
		display: inline-block;
	}

	.tab-item text.active {
		border-bottom: #{4rpx} solid #ff4544;
		color: #ff4544;
	}

	.status {
		width: 100%;
		height: #{104rpx};
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.status-list {
		width: #{368rpx};
		height: #{56rpx};
		margin: #{24rpx} auto;
		border-radius: #{28rpx};
		line-height: #{54rpx};
		font-size: #{24rpx};
		color: #666666;
		background-color: #fff;
	}

	.status-list view {
		width: 50%;
		text-align: center;
		border: #{2rpx} solid #ff4544;
	}

	.status-list .active {
		background-color: #ff4544;
		height: #{56rpx};
		color: #ffffff;
	}

	.item {
		width: #{702rpx};
		margin: 0 #{24rpx} #{24rpx};
		background-color: #fff;
		border-radius: #{16rpx};
		padding: #{24rpx};
		position: relative;
	}

	.item.card-item {
		padding: #{40rpx} #{160rpx} #{40rpx} #{132rpx};
	}

	.shop {
		font-size: #{24rpx};
		color: #353535;
		max-width: #{500rpx};
	}

	.shop image {
		height: #{24rpx};
		width: #{24rpx};
		margin-right: #{12rpx};
	}

	.goods {
		height: #{160rpx};
		position: relative;
	}

	.goods image {
		height: #{160rpx};
		width: #{160rpx};
		border-radius: #{10rpx};
		float: left;
		margin-right: #{20rpx};
	}

	.goods-info {
		font-size: #{24rpx};
		color: #999999;
	}

	.goods-name {
		color: #353535;
		height: #{72rpx};
	}

	.goods-price {
		color: #353535;
		font-size: #{24rpx};
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.total {
		font-size: #{24rpx};
		margin-top: #{28rpx};
		color: #999999;
		text-align: right;
	}

	.total text {
		color: #353535;
		font-size: #{28rpx};
	}

	.clerk-btn button {
		width: #{138rpx};
		text-align: center;
		height: #{48rpx} !important;
		border-radius: #{24rpx};
		border: #{1rpx} solid #ff4544;
		line-height: #{46rpx};
		margin-top: #{28rpx};
		font-size: #{24rpx};
		color: #ff4544;
		background-color: #fff;
	}

	.card-clerk .clerk-btn button {
		margin-top: 0;
	}

	.clerk-btn button::after {
		border: 0;
	}

	.clerk-btn-1 {
		width: #{138rpx};
		padding: #{8rpx 0};
		text-align: center;
		color: #ff4544;
		background-color: #ffecec;
		font-size: $uni-font-size-weak-one;
	}

	.search-item {
		height: #{96rpx};
		background-color: #efeff4;
		padding: 0 #{24rpx};
		font-size: #{28rpx};
		color: #00c203;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 22;
	}

	.search-input {
		height: #{64rpx};
		position: relative;
		width: #{620rpx};
	}

	.search-input image {
		height: #{22rpx};
		width: #{22rpx};
		position: absolute;
		top: #{21rpx};
		left: #{28rpx};
		z-index: 10;
	}

	.search-input input {
		padding-left: #{62rpx};
		background-color: #fff;
		border-radius: #{32rpx};
		height: #{64rpx};
		font-size: #{26rpx};
		color: #353535;
	}

	.search-history {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background-color: #fff;
		padding: #{120rpx} #{4rpx} #{24rpx};
		font-size: #{28rpx};
		color: #666;
		z-index: 20;
	}

	.search-title {
		padding: 0 #{20rpx};
		margin-bottom: #{24rpx};
	}

	.keyword-item {
		height: #{64rpx};
		line-height: #{64rpx};
		padding: 0 #{20rpx};
		background-color: #f7f7f7;
		color: #333;
		border-radius: #{32rpx};
		font-size: #{28rpx};
		margin-left: #{20rpx};
		margin-bottom: #{20rpx};
		max-width: 90%;
	}

	.scan {
		position: fixed;
		bottom: #{80rpx};
		right: 0;
		z-index: 30;
		height: #{116rpx};
		width: #{112rpx};
	}

	.scan button {
		height: #{116rpx} !important;
		width: #{112rpx};
		border-top-left-radius: #{58rpx};
		border-bottom-left-radius: #{58rpx};
		border: #{1rpx} solid #cdcdcd;
		border-right: 0;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 0 #{10rpx} rgb(239, 239, 239);
		text-align: center;
	}

	.scan button image {
		height: #{64rpx};
		width: #{64rpx};
		margin-top: #{26rpx};
	}

	.item .card-img {
		position: absolute;
		top: #{40rpx};
		left: #{24rpx};
		width: #{88rpx};
		height: #{88rpx};
		border-radius: 50%;
	}

	.platform {
		font-size: #{24rpx};
		color: #999999;
		height: #{24rpx};
		margin-top: #{20rpx};
	}

	.platform-img {
		height: #{24rpx};
		width: #{24rpx};
		margin-right: #{12rpx};
	}

	.card-name {
		width: #{370rpx};
		font-size: #{28rpx};
		color: #353535;
	}

	.card-clerk {
		position: absolute;
		right: #{24rpx};
		top: 0;
		height: #{168rpx};
	}

	.card-clerk .clerked-img {
		width: #{120rpx};
		height: #{120rpx};
	}

	.no-tip {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
		color: #666666;
		font-size: #{24rpx};
		width: #{240rpx};
		text-align: center;
	}

	.no-tip image {
		height: #{240rpx};
		width: #{240rpx};
		margin-bottom: #{20rpx};
	}

	.left-status {
		border-top-left-radius: #{28rpx};
		border-bottom-left-radius: #{28rpx};
	}

	.right-status {
		border-top-right-radius: #{28rpx};
		border-bottom-right-radius: #{28rpx};
	}

	.history-img {
		height: #{34rpx};
		width: #{28rpx};
	}

	.history-list {
		max-height: #{420rpx};
		overflow: hidden;
	}

	.item-top {
		margin-bottom: #{28rpx};
	}

	.item-top .item-status {
		font-size: #{24rpx};
		color: #ff4544;
	}

	.goods-attr {
		margin-bottom: #{16rpx};
	}

	.goods-attr text {
		margin-right: #{18rpx};
	}

	.refund-text {
		font-size: #{24rpx};
		color: #ff4544;
		margin-top: #{24rpx};
		text-align: right;
	}

	.surplus-number {
		font-size: 24#{rpx};
		color: #999999;
		margin: 12#{rpx} 0;
	}
</style>
